<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="template.xhtml">
	<ui:define name="content">
		<h:head>
			<title>City Information</title>
			<script
				src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
			<script type="text/javascript">
				function initialize() {
					var latitude = document.getElementById("lat").value;
					var longitude = document.getElementById("lon").value;

					var mapOptions = {
						center : new google.maps.LatLng(latitude, longitude),
						zoom : 5,
						mapTypeId : google.maps.MapTypeId.ROADMAP
					};

					var map = new google.maps.Map(document
							.getElementById("map-canvas"), mapOptions);

					var location = new google.maps.LatLng(latitude, longitude);
					var marker = new google.maps.Marker({
						position : location,
						map : map
					});

				}
				google.maps.event.addDomListener(window, 'load', initialize);
			</script>
		</h:head>
		<body>
			<f:view>
				<h:form>
					<h:panelGrid columns="2"
						style="width: 1000px; margin: 5px; vertical-align: top;">
						<h:panelGrid
							style="width: 500; height: 100%; vertial-align: top; ">
							<h:outputLabel value="#{city.name}"
								style="font-size: 1.8em; color: #A52A2A; margin-top: 15px; margin-bottom: 10px"></h:outputLabel>
							<h:outputLabel value="#{city.description}"></h:outputLabel>
							<br></br>
							<h:panelGrid columns="3" width="100%" style="text-align: center">
								<h:outputText value="#{city.rating}/10 "
									style="font-size: 1.4em; text-align: right;"></h:outputText>
								<p:rating value="#{city.rating}" stars="10"
									readonly="#{city.rated}" />
								<h:commandButton action="#{cityController.addRating}"
									value="Rate"></h:commandButton>
							</h:panelGrid>
							<br></br>

							<h:panelGrid columns="2" width="100%">
								<h:graphicImage value="/images/thermometer.png" width="50"></h:graphicImage>
								<h:panelGrid columns="12" width="100%"
									style="text-align: center;" border="1">
									<h:outputText value="Jan"></h:outputText>
									<h:outputText value="Feb"></h:outputText>
									<h:outputText value="Mar"></h:outputText>
									<h:outputText value="Apr"></h:outputText>
									<h:outputText value="May"></h:outputText>
									<h:outputText value="Jun"></h:outputText>
									<h:outputText value="Jul"></h:outputText>
									<h:outputText value="Aug"></h:outputText>
									<h:outputText value="Sep"></h:outputText>
									<h:outputText value="Oct"></h:outputText>
									<h:outputText value="Nov"></h:outputText>
									<h:outputText value="Dec"></h:outputText>
									<h:outputText value="#{city.janMeanC}"></h:outputText>
									<h:outputText value="#{city.febMeanC}"></h:outputText>
									<h:outputText value="#{city.marMeanC}"></h:outputText>
									<h:outputText value="#{city.aprMeanC}"></h:outputText>
									<h:outputText value="#{city.mayMeanC}"></h:outputText>
									<h:outputText value="#{city.junMeanC}"></h:outputText>
									<h:outputText value="#{city.julMeanC}"></h:outputText>
									<h:outputText value="#{city.augMeanC}"></h:outputText>
									<h:outputText value="#{city.sepMeanC}"></h:outputText>
									<h:outputText value="#{city.octMeanC}"></h:outputText>
									<h:outputText value="#{city.novMeanC}"></h:outputText>
									<h:outputText value="#{city.decMeanC}"></h:outputText>
								</h:panelGrid>
							</h:panelGrid>
						</h:panelGrid>
						<h:panelGrid style="width: 500;">
							<div id="map-canvas" style="height: 300px; width: 500px"></div>
							<p:galleria value="#{city.photos}" var="photo" panelWidth="500"
								panelHeight="300" showCaption="false" transitionInterval="2000">
								<p:graphicImage value="#{photo}" height="300" />
							</p:galleria>
						</h:panelGrid>
					</h:panelGrid>
		</h:form>
		
		<h:inputHidden id="lat" value="#{city.latitude}" />
		<h:inputHidden id="lon" value="#{city.longitude}" /> 
	</f:view>
</body>

	</ui:define>
</ui:composition>
</html>